<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/flatiron-director/flatiron-director.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="td-input.html">
<link rel="import" href="td-item.html">

<dom-module id="td-todos">
	<template strip-whitespace>
		<style>
			:host {
				display: block;
			}
		</style>
		<flatiron-director route="{{route}}" hidden></flatiron-director>
		<section class="todoapp">
			<header class="header">
				<input is="td-input" id="new-todo" class="new-todo"
							 placeholder="What needs to be done?" autofocus
							 on-td-input-commit="addTodoAction"
							 on-td-input-cancel="cancelAddTodoAction">
			</header>

			<template is="dom-if" if="{{items.length}}">
				<section class="main">
					<input id="toggle-all" class="toggle-all" type="checkbox" checked="[[allCompleted]]"
								 on-change="toggleAllCompletedAction">
					<label for="toggle-all">Mark all as complete</label>
					<ul class="todo-list" on-td-destroy-item="destroyItemAction">
						<template id="todo-list-repeater" is="dom-repeat" items="{{items}}"
											filter="{{matchesFilter(route)}}" observe="completed"
											initial-count="10"
											strip-whitespace>
							<li is="td-item" item="{{item}}"></li>
						</template>
					</ul>
				</section>

				<footer class="footer">
					<span class="todo-count">
						<strong>{{activeCount}}</strong>
						<span>{{_computeItemsLeft(activeCount)}}</span><span> left</span>
					</span>

					<iron-selector class="filters" selected="{{route}}" attr-for-selected="route">
						<li route="">
							<a href="#/" class$="{{_computeLinkClass(route, '')}}">All</a>
						</li>
						<li route="active">
							<a href="#/active" class$="{{_computeLinkClass(route, 'active')}}">Active</a>
						</li>
						<li route="completed">
							<a href="#/completed" class$="{{_computeLinkClass(route, 'completed')}}">Completed</a>
						</li>
					</iron-selector>

					<template is="dom-if" if="{{anyCompleted}}" strip-whitespace>
						<button class="clear-completed" on-tap="clearCompletedAction"
										style="visibility:visible">Clear completed</button>
					</template>

				</footer>
			</template>

		</section>
	</template>
	<script>
		(function () {
			'use strict';

			Polymer({
				is: 'td-todos',

				properties: {
					items: {
						type: Array
					},
					model: {
						type: Object
					},
					modelId: {
						type: String
					},
					route: {
						type: String
					},
					allCompleted: {
						type: Boolean,
						computed: '_computeAllCompleted(anyCompleted, activeCount)'
					},
					activeCount: {
						type: Number,
						computed: '_computeActiveCount(items, items.*)'
					},
					anyCompleted: {
						type: Boolean,
						computed: '_computeAnyCompleted(items, items.*)'
					}
				},

				attached: function () {
					this.model = document.querySelector('#' + this.modelId);
				},

				_computeLinkClass: function(currRoute, route) {
					return currRoute === route ? 'selected' : '';
				},

				_computeAnyCompleted: function(items) {
					return this.model ? this.model.getCompletedCount() > 0 : false;
				},

				_computeActiveCount: function(items) {
					return this.model ? this.model.getActiveCount() : 0;
				},

				_computeAllCompleted: function(anyCompleted, activeCount) {
					return anyCompleted && !activeCount;
				},

				_computeItemsLeft: function(count) {
					return count < 2 ? 'item' : 'items';
				},

				matchesFilter: function(route) {
					return function(item, index, array) {
						return this.model ? this.model.matchesFilter(item, route) : false;
					}.bind(this);
				},

				addTodoAction: function () {
					this.model.newItem(this.$['new-todo'].value);
					this.$['new-todo'].value = '';
				},

				cancelAddTodoAction: function () {
					this.$['new-todo'].value = '';
				},

				destroyItemAction: function(e, detail) {
					this.model.destroyItem(detail);
				},

				toggleAllCompletedAction: function(e) {
					this.model.setItemsCompleted(e.target.checked);
				},

				clearCompletedAction: function () {
					this.model.clearCompletedItems();
				}
			});
		})();
	</script>
</dom-module>
